<template>
  <div id="app">

      <!-- 一级视图  可以对应路由地址切换-->
      <!-- 期望渲染头部  -->
      <RouterView name="header"></RouterView>
      <!-- 期望渲染主体  -->
      <RouterView name="default" class="main"></RouterView>
      <!-- 期望渲染底部  -->
      <RouterView name="footer"></RouterView>
  </div>
</template>


<script>

// 默认暴露组件配置对象
export default {

}
</script>


<!-- 
    不加scoped属性  => 全局样式 
    加scoped属性 => 只对当前页面生效(局部样式)
  -->
<style scoped>
#app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#app .header{
  width: 7.5rem;
  line-height: 0.8rem;
  background-color: grey;
  text-align: center;
}

#app .footer {
  width: 7.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: grey;
  text-align: center;
}

#app .footer {
  display: flex;
}

#app .footer a ,#app .footer li{
  flex: 1;
  text-align: center;
}

#app .main {
  flex: 1;
  overflow-y: auto;
}

/* 链接激活时使用的 CSS 类名。(默认值router-link-active) */
.router-link-active{
  background-color: pink;
  color: #fff;
}

/* 链接激活时使用的自定义类型 */
.active{
  background-color: aquamarine;
  color: #fff;
}
</style>
